import React, { useState } from 'react'
import { Tabs, NavBar, Popup, CalendarPickerView } from 'antd-mobile'
import { Picker, Field } from 'react-vant'
import List1 from './components/list1'
import List2 from './components/list2'
import Date1 from './components/date1'
import {
  LeftOutline,
  RightOutline
} from 'antd-mobile-icons'
import dayjs from 'dayjs'
const cityList = ['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '武汉'];
function App() {
  const [date, setDate] = useState(<Date1 />)
  const [visible1, setVisible1] = useState(false)
  const [selectedCity, setSelectedCity] = useState('');
  const [isOpen, setIsOpen] = useState(false);

  // 处理城市选择
  const handleSelect = (city) => {
    setSelectedCity(city);
    setIsOpen(false);
  };
  return (
    <div>
      <NavBar right={<h3 onClick={() => setVisible1(true)}>{date}</h3>}>上海<LeftOutline /><RightOutline />北京 </NavBar>
      <div style={containerStyle} className="city-selector">
        {/* 选择器输入区域 */}
        <div style={inputStyle} onClick={() => setIsOpen(!isOpen)}>
          {selectedCity || '请选择城市'}
          <span style={arrowStyle}>{isOpen ? '↑' : '↓'}</span>
        </div>

        {/* 下拉选项列表 */}
        {isOpen && (
          <div style={dropdownStyle}>
            {cityList.map((city) => (
              <div
                key={city}
                style={itemStyle}
                onClick={() => handleSelect(city)}
              >
                {city}
              </div>
            ))}
          </div>
        )}
      </div>
      <Tabs>
        <Tabs.Tab title='直达' key='fruits'>
          <List1></List1>
        </Tabs.Tab>
        <Tabs.Tab title='机票' key='vegetables'>
          <List2></List2>
        </Tabs.Tab>
      </Tabs>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '60vh' }}
      >
        <CalendarPickerView
          min={dayjs()}
          max={dayjs(dayjs().add(13, 'day'))}
          onChange={(val) => {
            setDate(dayjs(val).format('YYYY-MM-DD'))
            setVisible1(false)
          }}
        />
      </Popup>
    </div>
  )
}

const containerStyle = {
  width: '200px',
  margin: '20px',
  position: 'relative',
  zIndex:'10000'
};

const inputStyle = {
  padding: '8px 12px',
  border: '1px solid #ddd',
  borderRadius: '4px',
  cursor: 'pointer',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center'
};

const arrowStyle = {
  marginLeft: '8px'
};

const dropdownStyle = {
  position: 'absolute',
  top: '100%',
  left: 0,
  right: 0,
  border: '1px solid #ddd',
  borderTop: 'none',
  borderRadius: '0 0 4px 4px',
  maxHeight: '200px',
  overflowY: 'auto'
};

const itemStyle = {
  padding: '8px 12px',
  cursor: 'pointer',
  backgroundColor: '#fff',
  '&:hover': {
    backgroundColor: '#f5f5f5'
  }
};

export default App
